<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Download History - YtDownloader</title>
    <link rel="stylesheet" href="../assets/css/index.css">
    <style>
        .history-container {
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .history-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            flex-wrap: wrap;
            gap: 15px;
        }

        .history-header h1 {
            margin: 0;
            font-size: 32px;
            font-weight: 700;
            color: var(--text);
        }

        .history-controls {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            align-items: center;
            margin-bottom: 25px;
        }

        .search-box {
            padding: 10px 15px;
            border: 2px solid var(--box-toggle, #3a3a3a);
            border-radius: 6px;
            background: var(--box-main, #2a2a2a);
            color: var(--text, #fff);
            width: 300px;
            font-size: 14px;
            transition: border-color 0.3s ease;
        }

        .search-box:focus {
            outline: none;
            border-color: var(--select, #54abde);
        }

        .filter-select {
            padding: 10px 15px;
            border: 2px solid var(--box-toggle, #3a3a3a);
            border-radius: 6px;
            background: var(--box-main, #2a2a2a);
            color: var(--text, #fff);
            font-size: 14px;
            cursor: pointer;
            transition: border-color 0.3s ease;
        }

        .filter-select:focus {
            outline: none;
            border-color: var(--select, #54abde);
        }

        .history-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-bottom: 30px;
        }

        .stat-card {
            padding: 20px;
            background: var(--box-main, #2a2a2a);
            border-radius: 10px;
            border: 2px solid var(--box-toggle, #3a3a3a);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            transition: all 0.3s ease;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        .stat-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        .stat-card h3 {
            margin: 0 0 10px 0;
            font-size: 13px;
            opacity: 0.7;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text);
        }

        .stat-card .value {
            font-size: 24px;
            font-weight: bold;
            color: var(--text);
            word-break: break-word;
        }

        .history-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .history-item {
            display: flex;
            align-items: center;
            padding: 18px;
            background: var(--item-bg, #2a2a2a);
            border-radius: 10px;
            border: 2px solid var(--box-toggle, #3a3a3a);
            transition: all 0.3s ease;
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            gap: 15px;
        }

        .history-item:hover {
            transform: translateX(5px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            border-color: var(--select, #54abde);
        }

        .history-item-thumbnail {
            width: 80px;
            height: 80px;
            background: var(--box-toggle, #ddd);
            border-radius: 8px;
            object-fit: cover;
            flex-shrink: 0;
        }

        .history-item-info {
            flex: 1;
            min-width: 0;
            overflow: hidden;
        }

        .history-item-title {
            font-weight: 600;
            font-size: 16px;
            margin-bottom: 8px;
            overflow: hidden;
            text-overflow: ellipsis;
            color: var(--text);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            line-height: 1.4;
            text-align: left;
        }

        .history-item-meta {
            display: flex;
            gap: 18px;
            font-size: 13px;
            opacity: 0.7;
            flex-wrap: wrap;
            color: var(--text);
            text-align: left;
        }

        .history-item-meta span {
            white-space: nowrap;
        }

        .history-item-actions {
            display: flex;
            gap: 10px;
            flex-shrink: 0;
        }

        .history-item-actions button {
            padding: 8px 16px;
            border: none;
            border-radius: 6px;
            background: var(--blueBtn, #54abde);
            color: white;
            cursor: pointer;
            font-size: 13px;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .history-item-actions button:hover {
            transform: scale(1.05);
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
        }

        .history-item-actions button:active {
            transform: scale(0.98);
        }

        .history-item-actions .delete-btn {
            background: var(--redBtn, #ff6b6b);
        }

        .history-item-actions .delete-btn:hover {
            background: var(--redBtn-bottom, #ff5252);
        }

        .empty-state {
            text-align: center;
            padding: 80px 20px;
            color: var(--text, #666);
        }

        .empty-state-icon {
            font-size: 64px;
            margin-bottom: 20px;
            opacity: 0.3;
        }

        .empty-state h2 {
            color: var(--text);
            margin-bottom: 10px;
        }

        .empty-state p {
            color: var(--text);
            opacity: 0.7;
        }

        .submitBtn {
            padding: 10px 24px;
            border: none;
            border-radius: 8px;
            background: var(--greenBtn, #4caf50);
            color: white;
            cursor: pointer;
            font-size: 15px;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .submitBtn:hover {
            background: var(--greenBtn-bottom, #45a049);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .submitBtn:active {
            transform: translateY(0);
        }

        .submitBtn.close-btn {
            background: var(--redBtn, #ff6b6b);
        }

        .submitBtn.close-btn:hover {
            background: var(--redBtn-bottom, #ff5252);
        }

        .action-buttons {
            display: flex;
            gap: 12px;
            margin-bottom: 25px;
            flex-wrap: wrap;
        }

        .action-buttons button {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            background: var(--blueBtn, #54abde);
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 14px;
            font-weight: 600;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .action-buttons button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .action-buttons button:active {
            transform: translateY(0);
        }

        .action-buttons .danger-btn {
            background: var(--redBtn, #ff6b6b);
        }

        .action-buttons .danger-btn:hover {
            background: var(--redBtn-bottom, #ff5252);
        }

        @media (max-width: 768px) {
            .history-stats {
                grid-template-columns: 1fr;
            }

            .history-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }

            .history-item-thumbnail {
                margin-right: 0;
                margin-bottom: 0;
                align-self: center;
            }

            .history-item-info {
                width: 100%;
            }

            .history-item-title {
                text-align: center;
                white-space: normal;
                word-break: break-word;
            }

            .history-item-meta {
                justify-content: center;
                text-align: center;
            }

            .history-item-actions {
                margin-left: 0;
                width: 100%;
                justify-content: center;
                flex-wrap: wrap;
            }

            .history-item-actions button {
                flex: 1;
                min-width: 100px;
            }

            .search-box {
                width: 100%;
            }

            .filter-select {
                width: 100%;
            }

            .history-header h1 {
                font-size: 24px;
            }

            .action-buttons {
                width: 100%;
            }

            .action-buttons button {
                flex: 1;
                min-width: 120px;
            }
        }

        @media (max-width: 1024px) and (min-width: 769px) {
            .history-item-title {
                white-space: normal;
                word-break: break-word;
                max-width: 500px;
            }
        }

        .popup-container {
            position: fixed;
            bottom: 30px;
            left: 30px;
            z-index: 9999;

            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .popup-item {
            display: inline-block;

            color: #fff;
            padding: 12px 24px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            font-weight: 600;
            font-size: 15px;

            opacity: 1;
            transition: opacity 0.4s;
        }
    </style>
</head>


<body>
    <div class="history-container">
        <div class="history-header">
            <h1 id="historyTitle" data-translate="downloadHistory">Download History</h1>
            <button id="closeBtn" class="submitBtn close-btn" onclick="window.close()"
                data-translate="close">Close</button>
        </div>

        <div class="history-controls">
            <input type="text" class="search-box" id="searchBox" placeholder="Search by title or URL..."
                data-translate-placeholder="searchByTitleOrUrl">
            <select class="filter-select" id="formatFilter">
                <option value="" data-translate="allFormats">All Formats</option>
                <option value="mp4">MP4</option>
                <option value="mp3">MP3</option>
                <option value="m4a">M4A</option>
                <option value="webm">WEBM</option>
                <option value="opus">Opus</option>
                <option value="wav">WAV</option>
                <option value="flac">FLAC</option>
            </select>
        </div>

        <div class="history-stats" id="statsContainer"></div>

        <div class="action-buttons">
            <button id="exportJsonBtn" onclick="exportHistoryJSON()" data-translate="exportAsJson">Export as
                JSON</button>
            <button id="exportCsvBtn" onclick="exportHistoryCSV()" data-translate="exportAsCsv">Export as CSV</button>
            <button id="clearAllBtn" class="danger-btn" onclick="clearAllHistory()"
                data-translate="clearAllHistory">Clear All History</button>
        </div>

        <div id="historyListContainer" class="history-list"></div>
    </div>

    <div id="popupContainer" class="popup-container"></div>

    <script src="../translations/i18n-init.js"></script>

    <script>
        const { ipcRenderer } = require("electron");

        document.addEventListener('translations-loaded', () => {
            window.i18n.translatePage();
            document.title = window.i18n.__("downloadHistory")
        });

        let allHistory = [];
        let filteredHistory = [];

        // Load history on page open
        document.addEventListener("DOMContentLoaded", () => {
            loadTheme();
            loadHistory();
            setupEventListeners();
        });

        function loadTheme() {
            const storageTheme = localStorage.getItem("theme");
            if (storageTheme) {
                document.documentElement.setAttribute("theme", storageTheme);
            } else {
                document.documentElement.setAttribute("theme", "frappe");

            }
        }

        function setupEventListeners() {
            document.getElementById("searchBox").addEventListener("input", filterHistory);
            document.getElementById("formatFilter").addEventListener("change", filterHistory);
        }

        function loadHistory() {
            ipcRenderer.invoke("get-download-history").then((history) => {
                allHistory = history || [];
                renderHistory(allHistory);
                updateStats();
            }).catch((error) => {
                console.error("Failed to load history:", error);
                showPopup("Failed to load download history. Please try again.", true);
            });
        }

        function filterHistory() {
            const searchTerm = document.getElementById("searchBox").value;
            const format = document.getElementById("formatFilter").value;

            filteredHistory = allHistory.filter((item) => {
                const matchesSearch =
                    !searchTerm ||
                    item.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
                    item.url.toLowerCase().includes(searchTerm.toLowerCase());

                const matchesFormat = !format || item.format.toLowerCase() === format.toLowerCase();

                return matchesSearch && matchesFormat;
            });

            renderHistory(filteredHistory);
        }

        function renderHistory(historyItems) {
            const container = document.getElementById("historyListContainer");

            // Clear container first
            container.innerHTML = '';

            if (historyItems.length === 0) {
                const emptyState = document.createElement('div');
                emptyState.className = 'empty-state';

                const icon = document.createElement('div');
                icon.className = 'empty-state-icon';
                icon.textContent = '📭';

                const heading = document.createElement('h2');
                heading.textContent = 'No Downloads Yet';

                const text = document.createElement('p');
                text.textContent = 'Your download history will appear here';

                emptyState.appendChild(icon);
                emptyState.appendChild(heading);
                emptyState.appendChild(text);
                container.appendChild(emptyState);
                return;
            }


            historyItems.forEach(item => {
                const itemDiv = document.createElement('div');
                itemDiv.className = 'history-item';
                itemDiv.dataset.id = item.id;


                const thumbnail = document.createElement(item.thumbnail ? 'img' : 'div');
                thumbnail.className = 'history-item-thumbnail';
                if (item.thumbnail) {
                    thumbnail.src = item.thumbnail;
                    thumbnail.alt = 'thumbnail';
                }
                itemDiv.appendChild(thumbnail);


                const info = document.createElement('div');
                info.className = 'history-item-info';


                const title = document.createElement('div');
                title.className = 'history-item-title';
                title.title = item.title;
                title.textContent = item.title;
                info.appendChild(title);


                const meta = document.createElement('div');
                meta.className = 'history-item-meta';


                const formatSpan = document.createElement('span');
                formatSpan.textContent = 'Format: ';
                const formatStrong = document.createElement('strong');
                formatStrong.textContent = item.format;
                formatSpan.appendChild(formatStrong);
                meta.appendChild(formatSpan);


                const sizeSpan = document.createElement('span');
                sizeSpan.textContent = 'Size: ';
                const sizeStrong = document.createElement('strong');
                sizeStrong.textContent = formatFileSize(item.fileSize);
                sizeSpan.appendChild(sizeStrong);
                meta.appendChild(sizeSpan);


                const dateSpan = document.createElement('span');
                dateSpan.textContent = 'Date: ';
                const dateStrong = document.createElement('strong');
                dateStrong.textContent = new Date(item.downloadDate).toLocaleDateString();
                dateSpan.appendChild(dateStrong);
                meta.appendChild(dateSpan);


                if (item.duration) {
                    const durationSpan = document.createElement('span');
                    durationSpan.textContent = 'Duration: ';
                    const durationStrong = document.createElement('strong');
                    durationStrong.textContent = formatDuration(item.duration);
                    durationSpan.appendChild(durationStrong);
                    meta.appendChild(durationSpan);
                }

                info.appendChild(meta);
                itemDiv.appendChild(info);


                const actions = document.createElement('div');
                actions.className = 'history-item-actions';


                const copyBtn = document.createElement('button');
                copyBtn.className = 'copy-url-btn';
                copyBtn.textContent = i18n.__('copyUrl');
                copyBtn.addEventListener('click', () => copyToClipboard(item.url));
                actions.appendChild(copyBtn);


                const openBtn = document.createElement('button');
                openBtn.className = 'open-file-btn';
                openBtn.textContent = i18n.__('open');
                openBtn.addEventListener('click', () => openFile(item.filePath));
                actions.appendChild(openBtn);


                const deleteBtn = document.createElement('button');
                deleteBtn.className = 'delete-btn';
                deleteBtn.textContent = i18n.__('delete');
                deleteBtn.addEventListener('click', () => deleteHistoryItem(item.id));
                actions.appendChild(deleteBtn);

                itemDiv.appendChild(actions);
                container.appendChild(itemDiv);
            });
        }

        function updateStats() {
            ipcRenderer.invoke("get-download-stats").then((stats) => {
                const statsContainer = document.getElementById("statsContainer");
                statsContainer.innerHTML = "";

                const createStatCard = (title, value) => {
                    const card = document.createElement("div");
                    card.className = "stat-card";

                    const titleElement = document.createElement("h3");
                    titleElement.textContent = title;

                    const valueElement = document.createElement("div");
                    valueElement.className = "value";
                    valueElement.textContent = value;

                    card.appendChild(titleElement);
                    card.appendChild(valueElement);

                    return card;
                };

                const mostCommonFormat = Object.keys(stats.byFormat).length > 0
                    ? Object.entries(stats.byFormat).sort((a, b) => b[1] - a[1])[0][0].toUpperCase()
                    : "N/A";

                statsContainer.appendChild(createStatCard(i18n.__("totalDownloads"), stats.totalDownloads));
                statsContainer.appendChild(createStatCard(i18n.__("totalSize"), formatFileSize(stats.totalSize)));
                statsContainer.appendChild(createStatCard(i18n.__("mostCommonFormat"), mostCommonFormat));

            }).catch((error) => {
                console.error("Failed to load stats:", error);
                const statsContainer = document.getElementById("statsContainer");
                // Clear any previous content
                statsContainer.innerHTML = "";

                // Helper function for creating placeholder cards
                const createPlaceholderCard = (title) => {
                    const card = document.createElement("div");
                    card.className = "stat-card";

                    const titleElement = document.createElement("h3");
                    titleElement.textContent = title;

                    const valueElement = document.createElement("div");
                    valueElement.className = "value";
                    valueElement.textContent = "--";

                    card.appendChild(titleElement);
                    card.appendChild(valueElement);

                    return card;
                };

                // Display placeholder stats on error
                statsContainer.appendChild(createPlaceholderCard("Total Downloads"));
                statsContainer.appendChild(createPlaceholderCard("Total Size"));
                statsContainer.appendChild(createPlaceholderCard("Most Common Format"));
            });
        }

        function formatFileSize(bytes) {
            if (bytes === 0) return "0 B";
            const k = 1024;
            const sizes = ["B", "KB", "MB", "GB"];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i];
        }

        function formatDuration(seconds) {
            const h = Math.floor(seconds / 3600);
            const m = Math.floor((seconds % 3600) / 60);
            const s = Math.floor(seconds % 60);
            if (h > 0) return `${h}h ${m}m`;
            if (m > 0) return `${m}m ${s}s`;
            return `${s}s`;
        }

        function copyToClipboard(text) {
            const { clipboard } = require("electron");
            clipboard.writeText(text);
            showPopup(i18n.__("urlCopiedToClipboard"));
        }

        function openFile(filePath) {
            const result = ipcRenderer.invoke("show-file", filePath).then(result => {
                if (result.success === false) {
                    showPopup(i18n.__("fileDoesNotExist"), true)
                }
            })
        }

        function deleteHistoryItem(id) {
            if (confirm(i18n.__("confirmDeleteHistoryItem"))) {
                ipcRenderer.invoke("delete-history-item", id).then(() => {
                    loadHistory();
                    filterHistory();
                }).catch((error) => {
                    console.error("Failed to delete history item:", error);
                    showPopup(i18n.__("failedToDeleteHistoryItem"), true);
                });
            }
        }

        function exportHistoryJSON() {
            ipcRenderer.invoke("export-history-json").then((data) => {
                downloadFile(data, "download_history.json", "application/json");
            }).catch((error) => {
                console.error("Failed to export history as JSON:", error);
                showPopup("Failed to export history as JSON. Please try again.", true);
            });
        }

        function exportHistoryCSV() {
            ipcRenderer.invoke("export-history-csv").then((data) => {
                downloadFile(data, "download_history.csv", "text/csv");
            }).catch((error) => {
                console.error("Failed to export history as CSV:", error);
                showPopup("Failed to export history as CSV. Please try again.", true);
            });
        }

        function downloadFile(content, filename, type) {
            const element = document.createElement("a");
            element.setAttribute("href", "data:" + type + ";charset=utf-8," + encodeURIComponent(content));
            element.setAttribute("download", filename);
            element.style.display = "none";
            document.body.appendChild(element);
            element.click();
            document.body.removeChild(element);
        }

        function clearAllHistory() {
            if (
                confirm(
                    i18n.__("confirmClearAllHistory")
                )
            ) {
                ipcRenderer.invoke("clear-all-history").then(() => {
                    loadHistory();
                    filterHistory();
                }).catch((error) => {
                    console.error("Failed to clear history:", error);
                    showPopup("Failed to clear history. Please try again.", true);
                });
            }
        }

        function showPopup(text, isError = false) {
            let popupContainer = document.getElementById("popupContainer");

            if (!popupContainer) {
                popupContainer = document.createElement("div");
                popupContainer.id = "popupContainer";
                popupContainer.className = "popup-container";
                document.body.appendChild(popupContainer);
            }

            const popup = document.createElement("span");
            popup.textContent = text;
            popup.classList.add("popup-item");

            popup.style.background = isError ? "#ff6b6b" : "#54abde";

            if (isError) {
                popup.classList.add("popup-error");
            }

            popupContainer.appendChild(popup);

            setTimeout(() => {
                popup.style.opacity = "0";
                setTimeout(() => {
                    popup.remove();
                    if (popupContainer.childElementCount === 0) {
                        popupContainer.remove();
                    }
                }, 400);
            }, 2200);
        }
    </script>
</body>

</html>